<template>
  <div>
    <a-dropdown v-if="opts&&opts.length>0">
      <a-menu slot="overlay">
        <a-menu-item :key="i" v-for="(o,i) in opts" @click="handleClick(o)"> {{ o.label }} </a-menu-item>
      </a-menu>
      <a-button :type="type" :size="size">
        <slot>{{ title }}</slot>
      </a-button>
    </a-dropdown>
    <div v-else>没有选项</div>
  </div>
</template>

<script>
export default {
  props: {
    type: {
      type: String,
      default: 'primary'
    },
    size: {
      type: String,
      default: 'default'
    },
    opts: {
      type: Array,
      default: () => {
        return [
          { label: '按钮1', disabled: false, divided: false },
          { label: '按钮1', disabled: true, divided: true }
        ]
      }
    }
  },
  data () {
    return {
      title: this.opts.length > 0 ? this.opts[0].label : ''
    }
  },
  methods: {
    handleClick (t) {
      this.title = t.label
      this.$emit('click', t)
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
